<template>
  <div class="header">
    <!-- 轮播图部分 -->
    <div class="banner">
      <mt-swipe :auto="4000">
        <mt-swipe-item class="banImg" v-for="(items,index2) in banner" :key="index2">
          <img :src="items.photoUrl">
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 搜索部分 -->
    <div class="con">
      <input type="text" class="searchText" placeholder="我要成为一名优秀的前端工程师">
      <a class="search">
        <img src="../../../src/images/search.png">
      </a>
    </div>
    <!-- icon图标分类部分 -->
    <div class="bookclass">
      <div v-for="(item,index) in icon" :key="index" class="iconDiv">
        <img class="icon" :src="item.photoUrl">
        <div class="icontext">{{ item.name }}</div>
      </div>
    </div>
    <!-- 课程展示 -->
    <div>
      <split></split>
      <bookclass1></bookclass1>
      <split></split>
      <bookclass2></bookclass2>
      <split></split>
      <bookclass4></bookclass4>
      <split></split>
      <bookclass3></bookclass3>
    </div>
  </div>
</template>
<script>
import bookclass1 from '../bookclass1/bookclass1'
import bookclass2 from '../bookclass2/bookclass2'
import bookclass3 from '../bookclass3/bookclass3'
import bookclass4 from '../bookclass4/bookclass4'
import split from '../split/split'
let url = 'http://localhost:8080/static/data/homepage.json'
import Vue from 'vue'
import Axios from 'axios'
Vue.prototype.$http = Axios
import 'mint-ui/lib/style.css'
import { Swipe, SwipeItem } from 'mint-ui'
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
export default {
  name: 'hello',
  components: {
    bookclass1: bookclass1,
    bookclass2: bookclass2,
    bookclass3: bookclass3,
    bookclass4: bookclass4,
    split: split
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      icon: [],
      banner: [],
      bookList: []
    }
  },
  created () {
    console.log('我已经运行了', url)
    let self = this
    Axios.get(url).then(function (res) {
      self.icon = res.data.result.iconDtoList
      self.banner = res.data.result.focusDtoList
      self.bookList = res.data.result.sectionDtoList
      console.log(res.data.result)
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" rel="stylesheet/stylus">
  *
    margin 0
    padding 0
  .header
    padding-bottom 50px
    .banner
      position :relative
      top : 0
      left : 0
      height : 190px
      width :375px
      margin-bottom 10px
      .banImg img 
        display inline-block
        width : 375px
        height : 180px
    .con
      width 100%
      height 40px
      position absolute
      top 0
      left 0
      background rgba(255,255,255,0.2)
      .searchText
        margin-top 7px
        margin-left 35px
        padding-left 15px
        width 260px
        height 25px
        border 0px
        border-radius 15px 15px
        background : rgba(0,0,0,0.3)
        color #ffffff
      .search img
        position absolute
        top 7px
        margin-left 10px
        width 20px
        height 20px
    .bookclass
      width : 100%
      height : 170px
      display : flex
      flex-wrap : wrap
      text-align center
      .iconDiv
        width: 25%
        height 60px
        .icon
          width : 38px
          height : 38px
        .icontext
          font-size : 12px
          line-height :20px
 
    #divclass
      height : 60px
      width : 100px
      background  : red
</style>
